import React, { useEffect } from 'react';
// 访客年龄分布图
import '../sacc/Tree.scss'
import * as echarts from 'echarts';
const Tree = () => {
    useEffect(() => {
        var option = echarts.init(document.getElementById('tree') || document.body);
        option.setOption({
            title: {
                text: '访客年龄分布图',

            },
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', 'man', 'woman'],
                    ['18岁以下', 100, 280,],
                    ['19~28岁', 200, 400,],
                    ['29~38岁', 170, 260,],
                    ['39~48岁', 160, 200],
                    ['49~58岁', 100, 160],
                    ['59岁以上', 55, 140],
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {
                max: 500,
                min: 0
            },
            series: [{
                type: 'bar'
            }, { type: 'bar' }]
        })
    }, [])

    return (
        <div>
            <div id='tree'></div>
        </div>
    );
};

export default Tree;